<div class="modal">
    <div class="modal-dialog modal-wide">
        <div class="modal-content">
            <div class="modal-header">
                <h2 ng-if="formElement.type != 'expression'">{{'FORM-BUILDER.POPUP.EDIT-TITLE' | translate:
                    formElement}}</h2>
                <h2 ng-if="formElement.type == 'expression'">{{'FORM-BUILDER.POPUP.EXPRESSION-TITLE' | translate}}</h2>
            </div>
            <div class="modal-body">
                <div class="center-pane">
                    <div class="content">
                        <div class="clearfix">
                            <ul class="tabs clearfix">
                                <li ng-repeat="tab in formTabs" ng-class="{'active': tab.id == activeTab.id}"
                                    ng-if="!tab.show || tab.show.indexOf(formElement.type) >= 0">
                                    <a ng-click="tabClicked(tab)">{{tab.title && (tab.title | translate) ||
                                        tab.name}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="form-group" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
                    <label translate="FORM-BUILDER.COMPONENT.LABEL"></label>
                    <input type="text" class="form-control" ng-model="formElement.name"
                           ng-change="formElementNameChanged(formElement)" auto-focus>
                </div>

                <div class="clearfix" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="formElement.overrideId">
                                {{'FORM-BUILDER.COMPONENT.OVERRIDEID' | translate}}
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.ID"></label>
                        <input type="text" class="form-control" ng-model="formElement.id"
                               ng-disabled="!formElement.overrideId" editor-input-check>
                    </div>

                    <div ng-show="formElement.type !== 'expression' && formElement.type !== 'hyperlink' && formElement.type !== 'spacer' && formElement.type !== 'horizontal-line' && formElement.type !== 'headline' && formElement.type !== 'headline-with-line'">
                        <div class="row">
                            <div class="form-group col-md-2">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="formElement.required">
                                        {{'FORM-BUILDER.COMPONENT.REQUIRED' | translate}}
                                    </label>
                                </div>
                            </div>
                            <div class="form-group col-md-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="formElement.readOnly">
                                        {{'FORM-BUILDER.COMPONENT.READONLY' | translate}}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div ng-show="formElement.type === 'functional-group' || formElement.type === 'people' || formElement.type === 'dropdown' || formElement.type === 'date' || formElement.type === 'text' || formElement.type === 'password' || formElement.type === 'multi-line-text' || formElement.type === 'integer' || formElement.type === 'decimal'">
                        <label translate="FORM-BUILDER.COMPONENT.PLACEHOLDER"></label>
                        <input type="text" class="form-control" ng-model="formElement.placeholder">
                    </div>
                </div>

                <div ng-if="(activeTab.id == 'options') && (formElement.type === 'radio-buttons' || formElement.type === 'dropdown')">

                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.OPTIONS"></label>

                        <div>
                            <div ng-repeat="option in formElement.options" style="margin-bottom: 5px"
                                 class="input-group">
                                <div class="input-group-addon">
                                    <input type="radio" ng-disabled="optionsExpressionEnabled"
                                           ng-model="formElement.value" ng-value="option.name">
                                </div>

                                <input id="firstDropdownOption" type="text" class="form-control"
                                       ng-disabled="optionsExpressionEnabled" ng-if="$index == 0" ng-model="option.name"
                                       style="background-color: #E6E6E6;">
                                <input type="text" class="form-control" ng-disabled="optionsExpressionEnabled"
                                       ng-if="$index > 0" ng-model="option.name">

                                <a class="input-group-addon" ng-if="$index == 0"
                                   data-placement="left" data-type="info" data-animation="am-fade-and-scale"
                                   bs-tooltip="'FORM-BUILDER.COMPONENT.DROPDOWN-EMPTY-VALUE-HELP'|translate">
                                    <i class="glyphicon glyphicon-question-sign"></i>
                                </a>

                                <a class="input-group-addon" ng-disabled="optionsExpressionEnabled"
                                   ng-click="removeOption($index)" ng-if="$index > 1"><i
                                        class="icon icon-remove"></i></a>
                            </div>

                            <div>
                                <input type="text" class="form-control"
                                       placeholder="{{'FORM-BUILDER.COMPONENT.ADD-OPTION' | translate}}"
                                       ng-model="newOption.name"
                                       ng-disabled="optionsExpressionEnabled" ng-blur="confirmNewOption($event)"
                                       ng-keydown="optionKeyDown($event)">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"
                                       ng-init="optionsExpressionEnabled = formElement.optionsExpression != null && formElement.optionsExpression != ''"
                                       ng-model="optionsExpressionEnabled" ng-change="optionsExpressionChanged($event)">
                                {{'FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION-ENABLED' | translate}}
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION"></label>
                        <textarea rows="3" ng-disabled="!optionsExpressionEnabled"
                                  ng-model="formElement.optionsExpression" class="form-control"
                                  id="readonly-text-value"></textarea>
                        <div class="subtle" translate="FORM-BUILDER.MESSAGE.OPTIONS-EXPRESSION-HELP"
                             style="padding: 5px 0 5px 1px;"></div>
                    </div>

                </div>

                <div ng-if="activeTab.id == 'upload' && formElement.type === 'upload'">
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="formElement.params.multiple">
                                {{'FORM-BUILDER.COMPONENT.UPLOAD-ALLOW-MULTIPLE' | translate}}
                            </label>
                        </div>
                    </div>
                </div>
                <div ng-if="activeTab.id == 'advanced' && (formElement.type === 'password')">
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label> <input
                            type="text" number-input-check maxlength="5" class="form-control"
                            ng-model="formElement.params.minLength">
                    </div>
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label> <input
                            type="text" number-input-check maxlength="5" class="form-control"
                            ng-model="formElement.params.maxLength">
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="formElement.params.passwordunmask">
                                    {{'FORM-BUILDER.COMPONENT.PASSWORD-UNMASK-OPTION' | translate}}?
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div ng-if="activeTab.id == 'advanced' && (formElement.type === 'text' || formElement.type === 'multi-line-text' || formElement.type === 'decimal' || formElement.type === 'integer')">
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label> <input
                            type="text" number-input-check maxlength="5" class="form-control"
                            ng-model="formElement.params.minLength">
                    </div>
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label> <input
                            type="text" number-input-check maxlength="5" class="form-control"
                            ng-model="formElement.params.maxLength">
                    </div>
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.REGEX-PATTERN"></label>
                        <div class="input-group">
                            <span class="input-group-addon">/^</span> <input type="text" class="form-control"
                                                                             ng-model="formElement.params.regexPattern">
                            <span class="input-group-addon">$/</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label translate="FORM-BUILDER.COMPONENT.MASK.TITLE"></label>
                                <input type="text" class="form-control" ng-model="formElement.params.mask">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.TITLE</label>
                                <ul>
                                    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBER</span>: <b>9</b>
                                    </li>
                                    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.LETTER</span>: <b>A</b>
                                    </li>
                                    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBERORLETTER</span>:
                                        <b>*</b></li>
                                    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.OPTIONAL</span>: <b>?</b>
                                    </li>
                                    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.PHONE</span>: <b>(99)
                                        9999-9999</b></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div ng-if="activeTab.id == 'advanced' && formElement.type === 'hyperlink'">
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.HYPERLINK-URL"></label> <input
                            type="text" class="form-control" ng-model="formElement.params.hyperlinkUrl">
                    </div>
                </div>

                <div ng-if="activeTab.id == 'general' && formElement.type === 'expression'">
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.EXPRESSION"></label>
                        <textarea rows="3" ng-model="formElement.expression" class="form-control"
                                  id="readonly-text-value"></textarea>
                        <div class="subtle" translate="FORM-BUILDER.MESSAGE.EXPRESSION-HELP"
                             style="padding: 5px 0 5px 1px;"></div>
                    </div>
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.SIZE"></label>
                        <select class="form-control" ng-model="formElement.params.size">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="pull-right">
                    <button type="button" class="btn btn-sm btn-default" ng-click="doneEditing()">
                        {{'GENERAL.ACTION.CLOSE' | translate}}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
